<!--
 * @Author: Mark
 * @Date: 2019-02-01 11:31:29
 * @LastEditors: Mark
 * @LastEditTime: 2019-02-01 12:46:29
 * @Description: 
 -->
<template>
  <div>
    <el-date-picker
      v-model="value"
      align="right"
      type="date"
      placeholder="选择日期"
      format="yyyy 年 MM月 dd日"
      value-format="timestamp"
      @change= "change"
      :picker-options="pickerOptions">
     </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '前天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit('pick', date);
            }
          },{
            text: '大前天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', date);
            }
          },
           {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value : ''
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.init()
  },

  methods: {
    /**
     * 初始化默认为今天
     */
    init(){
      this.value = new Date().getTime()
      //把默认时间传回父组件
      this.change()
    },

    /**
     * 时间控件发生改变的事件
     */
    change(){
       this.$emit('change', this.value)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>